﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="GoShopping.Index" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="Content/css/Search.css" rel="stylesheet" />
    <link href="Content/css/reset.css" rel="stylesheet" />
    <link href="Content/css/iconfont/iconfont.css" rel="stylesheet" />
    <link href="Content/css/MainMaster1.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css" />
    <script src="Content/js/vue.js"></script>
    <script src="Content/js/jquery-1.10.2.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .span_btn{
            width:50px;height:48px;float:right;line-height:50px;margin-top:25px;border:1px solid #c0c0c0;cursor:pointer
        }
        .span_btn:hover{
            background: #00CBFD;
            color: #fff;
            border:none
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div id="out">
            <div class="black-nav">
                <div class="wrap">
                    <ul class="black-nav-left">
                        <li><a href="#">玉米商城</a><span>|</span></li>
                        <li><a href="#">MIUI</a><span>|</span></li>
                        <li><a href="#">loT</a><span>|</span></li>
                        <li><a href="#">云服务</a><span>|</span></li>
                        <li><a href="#">天星科技</a><span>|</span></li>
                        <li><a href="#">有品</a><span>|</span></li>
                        <li><a href="#">小爱开发平台</a><span>|</span></li>
                        <li><a href="#">企业团购</a><span>|</span></li>
                        <li><a href="#">资质证明</a><span>|</span></li>
                        <li><a href="#">协议规则</a><span>|</span></li>
                        <li>
                            <a href="#">下载APP</a>
                            <span>|</span>
                            <div class="download">
                                <img src="./images/download.png" alt="" />
                                <p>玉米商城APP</p>
                            </div>
                            <div class="stri"></div>
                        </li>
                        <li><a href="#">智能生活</a><span>|</span></li>
                        <li><a href="#">SelectLocation</a><span>|</span></li>
                    </ul>
                    <ul class="black-nav-right" v-if="seesionCount==null">
                        <li><a href="Login.aspx">登录</a><span>|</span></li>
                        <li><a href="Register.aspx">注册</a><span>|</span></li>
                        <li class="cart">
                            <a href="Shopping cart.aspx" style="cursor: pointer;">
                                <i class="iconfont">&#xe607;</i>
                                <i>购物车</i>
                            </a>
                            
                        </li>
                    </ul>
                    <ul class="black-nav-right" v-else>
                        <li><a href="#">用户名:{{seesionCount}}</a><span>|</span></li>
                       <li><a href="UserInfo.aspx">个人中心</a><span>|</span></li>
                        <li class="cart">
                            <a href="Shopping cart.aspx" style="cursor: pointer;">
                                <i class="iconfont">&#xe607;</i>
                                <i>购物车</i>
                            </a>
                            
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 黑色导航 end -->
            <!-- 白色导航 start -->
            <div class="white-nav">
                <div class="wrap">
                    <a href="Index.aspx">
                        <div class="logo">
                            <img src="images/Logo.png" />
                        </div>
                    </a>
                    <div class="nav-bar">
                        <ul>
                            <li>
                                <a href="#">
                                   <img src="./images/zzxsh.gif" alt="" />
                                </a>
                            </li>
                            <li v-for="(className,index) in this.tyIDClass.slice(0,10)">
                                <a :href="`Search.aspx?tyID=${index+1}`">{{className.ClassName}}</a>

                                <%--<div class="nav-bar-list">
                                    <div class="wrap">
                                        <ul>
                                            <li :v-for="`item in this.goodsXinxi${index+1}`">
                                                <a href="#">
                                                    <div class="img-box">
                                                        <img src="./images/phone.png" alt="" />
                                                    </div>
                                                    <p class="name">{{item.GoodsName}}</p>
                                                    <p class="price">￥{{item.GoodsPrice}}</p>
                                                </a>
                                            </li>
                                            
                                        </ul>
                                    </div>
                                </div>--%>

                            </li>
                            
                        </ul>
                    </div>

                    <div class="search" style="display:flex">
                        <input type="text" placeholder="请输入~" v-model="key" style="width:225px" />
                        <span class="iconfont span_btn" @click="Sousuo">&#xe63d</span>
                    </div>
                </div>
            </div>
            <!-- 白色导航 end -->
            <!-- Banner start -->
            <div class="banner">
                <div class="wrap">
                    <img class="banner-img" :src="bannerImg[index]"  alt=""/>
                    <div class="slide">
                        <ul>
                            <li>
                                <a :href="`Search.aspx?tyID=${this.tyIDClass[0].tyID}`">{{this.tyIDClass[0].ClassName}}<i class="iconfont">&#xe621;</i></a>
                                <div class="slide-list">
                                    <ul>
                                        <li v-for="item in this.goodsXinxi1">
                                            <a :href="`GoodsDetail.aspx?GoodsID=${item.GoodsID}`">
                                                <img :src="item.GoodsPic" alt=""/>
                                                <span>{{item.GoodsName}}</span>
                                            </a>
                                        </li>
                                        
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <a :href="`Search.aspx?tyID=${this.tyIDClass[1].tyID}`">{{this.tyIDClass[1].ClassName}}<i class="iconfont">&#xe621;</i></a>
                                <div class="slide-list">
                                    <ul>
                                        <li v-for="item in this.goodsXinxi2">
                                            <a :href="`GoodsDetail.aspx?GoodsID=${item.GoodsID}`">
                                                <img :src="item.GoodsPic" alt="" />
                                                <span>{{item.GoodsName}}</span>
                                            </a>
                                        </li>

                                    </ul>
                                </div>
                            </li>


                            <li>
                                <a :href="`Search.aspx?tyID=${this.tyIDClass[2].tyID}`">{{this.tyIDClass[2].ClassName}}<i class="iconfont">&#xe621;</i></a>
                                <div class="slide-list">
                                    <ul>
                                        <li v-for="item in this.goodsXinxi3">
                                            <a :href="`GoodsDetail.aspx?GoodsID=${item.GoodsID}`">
                                                <img :src="item.GoodsPic" alt="" />
                                                <span>{{item.GoodsName}}</span>
                                            </a>
                                        </li>

                                    </ul>
                                </div>
                            </li>
                            <li>
                                <a :href="`Search.aspx?tyID=${this.tyIDClass[3].tyID}`">{{this.tyIDClass[3].ClassName}}<i class="iconfont">&#xe621;</i></a>
                                <div class="slide-list">
                                    <ul>
                                        <li v-for="item in this.goodsXinxi4">
                                            <a :href="`GoodsDetail.aspx?GoodsID=${item.GoodsID}`">
                                                <img :src="item.GoodsPic" alt="" />
                                                <span>{{item.GoodsName}}</span>
                                            </a>
                                        </li>

                                    </ul>
                                </div>
                            </li>
                            <li>
                                <a :href="`Search.aspx?tyID=${this.tyIDClass[4].tyID}`">{{this.tyIDClass[4].ClassName}}<i class="iconfont">&#xe621;</i></a>
                                <div class="slide-list">
                                    <ul>
                                        <li v-for="item in this.goodsXinxi5">
                                            <a :href="`GoodsDetail.aspx?GoodsID=${item.GoodsID}`">
                                                <img :src="item.GoodsPic" alt="" />
                                                <span>{{item.GoodsName}}</span>
                                            </a>
                                        </li>

                                    </ul>
                                </div>
                            </li>
                            <li>
                                <a :href="`Search.aspx?tyID=${this.tyIDClass[5].tyID}`">{{this.tyIDClass[5].ClassName}}<i class="iconfont">&#xe621;</i></a>
                                <div class="slide-list">
                                    <ul>
                                        <li v-for="item in this.goodsXinxi6">
                                            <a :href="`GoodsDetail.aspx?GoodsID=${item.GoodsID}`">
                                                <img  :src="item.GoodsPic"alt="" />
                                                <span>{{item.GoodsName}}</span>
                                            </a>
                                        </li>

                                    </ul>
                                </div>
                            </li>
                            <li>
                                <a :href="`Search.aspx?tyID=${this.tyIDClass[6].tyID}`">{{this.tyIDClass[6].ClassName}}<i class="iconfont">&#xe621;</i></a>
                                <div class="slide-list">
                                    <ul>
                                        <li v-for="item in this.goodsXinxi7">
                                            <a :href="`GoodsDetail.aspx?GoodsID=${item.GoodsID}`">
                                                <img :src="item.GoodsPic" alt="" />
                                                <span>{{item.GoodsName}}</span>
                                            </a>
                                        </li>

                                    </ul>
                                </div>
                            </li>
                            <li>
                                <a :href="`Search.aspx?tyID=${this.tyIDClass[7].tyID}`">{{this.tyIDClass[7].ClassName}}<i class="iconfont">&#xe621;</i></a>
                                <div class="slide-list">
                                    <ul>
                                        <li v-for="item in this.goodsXinxi8">
                                            <a :href="`GoodsDetail.aspx?GoodsID=${item.GoodsID}`">
                                                <img :src="item.GoodsPic" alt="" />
                                                <span>{{item.GoodsName}}</span>
                                            </a>
                                        </li>

                                    </ul>
                                </div>
                            </li>
                            <li>
                                <a :href="`Search.aspx?tyID=${this.tyIDClass[8].tyID}`">{{this.tyIDClass[8].ClassName}}<i class="iconfont">&#xe621;</i></a>
                                <div class="slide-list">
                                    <ul>
                                        <li v-for="item in this.goodsXinxi9">
                                            <a :href="`GoodsDetail.aspx?GoodsID=${item.GoodsID}`">
                                                <img :src="item.GoodsPic" alt="" />
                                                <span>{{item.GoodsName}}</span>
                                            </a>
                                        </li>

                                    </ul>
                                </div>
                            </li>
                            <li>
                                <a :href="`Search.aspx?tyID=${this.tyIDClass[9].tyID}`">{{this.tyIDClass[9].ClassName}}<i class="iconfont">&#xe621;</i></a>
                                <div class="slide-list">
                                    <ul>
                                        <li v-for="item in this.goodsXinxi10">
                                            <a :href="`GoodsDetail.aspx?GoodsID=${item.GoodsID}`">
                                                <img :src="item.GoodsPic" alt="" />
                                                <span>{{item.GoodsName}}</span>
                                            </a>
                                        </li>

                                    </ul>
                                </div>
                            </li>
                           
                        </ul>
                    </div>
                </div>
            </div>
            <!-- Banner end -->

            <!-- 广告模块 start -->
            <div class="ad">
                <div class="wrap">
                    <div class="ad-aside">
                        <ul>
                            <li v-for="item in this.tishi.slice(5,11)">
                                <a href="#">
                                    <i :class="`iconfont  ${item.icon}`"></i>
                                    <p>{{item.a}}</p>
                                </a>
                            </li>
                            
                        </ul>
                    </div>
                    <div class="ad-img">
                        <a href="#">
                            <img src="images/row-1.png" /></a>
                    </div>
                    <div class="ad-img">
                        <a href="#">
                            <img src="images/row-2.jpg" /></a>
                    </div>
                    <div class="ad-img">
                        <a href="#">
                            <img src="images/row-3.png" /></a>
                    </div>
                </div>
            </div>
            <!-- 广告模块 end -->

            <!-- 内容模块 start -->
            <div class="content">
                <div class="wrap">
                    <!-- 手机模块 start -->
                    <div class="phone">
                        <h3 class="title">{{this.tyIDClass[0].ClassName}}</h3>
                        <div class="phone-box">
                            <div class="phone-box-left">
                                <a href="#">
                                    <img src="./images/phone_left.jpg" alt="" />
                                </a>
                            </div>
                            <div class="phone-box-right">

                                <div class="item" v-for="(item,index) in this.goodsXinxi1.slice(0,8)">
                                    <a :href="`GoodsDetail.aspx?GoodsID=${item.GoodsID}`">
                                        <img class="item-img" :src="item.GoodsPic" alt="" />
                                        <p class="item-name">{{item.GoodsName}}</p>
                                        <p class="item-desc">{{item.GoodsDesc}}</p>
                                        <p class="item-price">￥{{item.GoodsPrice}}</p>
                                    </a>
                                </div>
                                
                            </div>
                        </div>
                        <div class="big-img">
                            <a href="#">
                                <img src="./images/phone_ad.jpg" alt="">
                            </a>
                        </div>
                    </div>
                    <!-- 手机模块 end -->
                    <!-- 家电模块 start -->
                    <div class="elc">
                        <h3 class="title">{{this.tyIDClass[1].ClassName}}</h3>
                        <div class="elc-box">
                            <div class="item elc-item">
                                <a href="#" style="display:block;width:234px;height:300px;overflow:hidden">
                                    <img src="images/jiadian-01.jpg" alt="" style="width:100%;height:100%" />
                                </a>
                            </div>
                            <div class="item" v-for="item in this.goodsXinxi2.slice(0,4)">
                                <a :href="`GoodsDetail.aspx?GoodsID=${item.GoodsID}`">
                                    <img class="item-img" :src="item.GoodsPic" alt="" />
                                    <p class="item-name">{{item.GoodsName}}</p>
                                    <p class="item-desc">{{item.GoodsDesc}}</p>
                                    <p class="item-price">￥{{item.GoodsPrice}}</p>
                                </a>
                            </div>
                            
                            <div class="item elc-item">
                                <a href="#" style="display: block; width: 234px; height: 300px; overflow: hidden">
                                    <img src="images/jiadian-02.jpg" alt="" style="width: 100%; height: 100%" />
                                </a>
                            </div>
                            <div class="item" v-for="item in this.goodsXinxi2.slice(4,7)">
                                 <a :href="`GoodsDetail.aspx?GoodsID=${item.GoodsID}`">
                                   <img class="item-img" :src="item.GoodsPic" alt="" />
                                   <p class="item-name">{{item.GoodsName}}</p>
                                   <p class="item-desc">{{item.GoodsDesc}}</p>
                                   <p class="item-price">￥{{item.GoodsPrice}}</p>
                                 </a>
                             </div>
                            
                            <div class="item-last">
                                <div>
                                    <a href="Search.aspx?tyID=2" style="display:flex;justify-content:center;align-items:center;">
                                        <div style="display:flex;align-items:center;justify-content:center;color:#757575;font-size:15px">浏览更多</div>
                                        <div style="display:flex;align-items:center;justify-content:center;color:#00CBFD;font-size:48px" class="iconfont icon-youjiantou"></div>
                                        
                                    </a>
                                </div>
                                <%--<div></div>--%>
                            </div>
                        </div>
                        <div class="big-img">
                            <a href="#">
                                <img src="./images/phone_ad.jpg" alt="" />
                            </a>
                        </div>
                    </div>

                </div>
            </div>
            <!--内容页面-->
            <!-- 页脚模块 start -->
            <div class="footer">
                <div class="wrap">
                    <div class="footer-service">
                        <ul>

                            <li v-for="item in this.tishi.slice(0,5)">
                                <a href="#">
                                    <i :class="`iconfont  ${item.icon}`"></i>
                                    <span>{{item.a}}</span>
                                </a>
                            </li>
                           
                        </ul>
                    </div>

                </div>
            </div>
            <div class="footer-link" style="background-color: #ffff">
                <div class="footer-padding">
                    <ul v-for="item in this.bz">
                        <li>{{item.a}}</li>
                        <li><a href="#">{{item.b}}</a></li>
                        <li><a href="#">{{item.c}}</a></li>
                        <li><a href="#">{{item.d}}</a></li>
                    </ul>

                    <div class="footer-aside">
                        <p class="tel" style="color: #00CBFD">400-100-5678</p>
                        <p class="time">8:00-18:00（仅收市话费）</p>
                        <a href="#" class="kefu" style="border: 2px solid #00CBFD; color: #00CBFD">人工客服</a>
                        <div class="follow">
                            关注小米:
                            <img src="./images/wb.png" alt="" />
                            <img src="./images/wx.png" alt="" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>
<script type="module">
    import { sendAjaxUrl1 } from './Content/js/FactoryVue.js'
    new Vue({
        el: '#out',
        data: {
            obj: {
                url: "tools/Goods.ashx",
                tyID: null,
            },//获取数据的地址
            goodsXinxi1: [],//产品信息
            goodsXinxi2: [],
            goodsXinxi3: [],
            goodsXinxi4: [],
            goodsXinxi5: [],
            goodsXinxi6: [],
            goodsXinxi7: [],
            goodsXinxi8: [],
            goodsXinxi9: [],
            goodsXinxi10: [],
            tyIDClass: [],//产品类型信息

            seesionCount: '',//用户名或者手机号
            tishi: [
                { a: '预约维修服务', icon: 'icon-buoumaotubiao46' },
                { a: '7天无理由退货', icon: 'icon-7tianwuliyoutuihuo' },
                { a: '15天免费退货', icon: 'icon-15tianwuliyoutuihuo' },
                { a: '满69包邮', icon: 'icon-gifs' },
                { a: '110余家售后网点', icon: 'icon-dingwei1' },
                { a: '米粉卡', icon: 'icon-dianhuaqia' },
                { a: '企业团购', icon: 'icon-shoujidaoshouji' },
                { a: 'F码通道', icon: 'icon-F' },
                { a: '保障服务', icon: 'icon-my_icon' },
                { a: '以旧换新', icon: 'icon-present' },
                { a: '花费充值', icon: 'icon-chongzhi' },
            ],
            bz: [
                { a: '爆款产品', b: '手机', c: '电视', d: '平板' },
                { a: '选购指南', b: '笔记本', c: '穿戴', d: '耳机' },
                { a: '线下门店', b: '玉米之家', c: '服务网点', d: '授权体验店/专区' },
                { a: '关于玉米', b: '了解玉米', c: '投资者关系', d: '可持续发展' },
                { a: '服务中心', b: '申请售后', c: '售后政策', d: '以旧换新' },
                { a: '关注我们', b: '新浪微博', c: '官方微信', d: '联系我们' },
            ],
            index:0,
            bannerImg: [
                './images/banner.jpg',
                './images/banner1.jpg',
                './images/banner2.jpg',
                './images/banner3.jpg',
                './images/banner4.jpg'
            ],//轮播图
            key:""
        },
        methods: {
            fun: function () {
                //setInterval(函数体,时间)
                setInterval(this.next, 2000)
            },
            next: function () {
                this.index++;
                if (this.index == this.bannerImg.length) {
                    this.index = 0;
                }
            },
            //搜索
            Sousuo() {
                console.log(this.key)
                if (this.key!="") {
                    window.location.href = "Search.aspx?tyID=" + this.key
                } else {
                    this.$message({
                        message: '请输入搜索关键词！',
                        type: 'warning'
                    });
                }
            }

        },
        mounted: function () {
            this.fun()
        },
        async created() {
            //获取Session中的数据
            this.seesionCount = sessionStorage.getItem("UserName");

            //首先获取所有商品的类型ID以及商品名称
            var that = this;
            that.obj.tyID = 0;
            await sendAjaxUrl1(that.obj).then(res => {
               
                this.tyIDClass = res.res;
                //console.log(res)
            })
            //获取商品具体信息
            that.obj.tyID = this.tyIDClass[0].tyID;
            await sendAjaxUrl1(that.obj).then(res => {
                console.log(res)
                this.goodsXinxi1 = res.res;
                //console.log(res)
            })
            that.obj.tyID = this.tyIDClass[1].tyID;
            await sendAjaxUrl1(that.obj).then(res => {
                this.goodsXinxi2 = res.res;
                //console.log(res)
            })
            that.obj.tyID = this.tyIDClass[2].tyID;
            await sendAjaxUrl1(that.obj).then(res => {
                this.goodsXinxi3 = res.res;
                //console.log(res)
            })
            that.obj.tyID = this.tyIDClass[3].tyID;
            await sendAjaxUrl1(that.obj).then(res => {
                this.goodsXinxi4 = res.res;
               // console.log(res)
            })
            that.obj.tyID = this.tyIDClass[4].tyID;
            await sendAjaxUrl1(that.obj).then(res => {
                this.goodsXinxi5 = res.res;
                //console.log(res)
            })
            that.obj.tyID = this.tyIDClass[5].tyID;
            await sendAjaxUrl1(that.obj).then(res => {
                this.goodsXinxi6 = res.res;
                //console.log(res)
            })
            that.obj.tyID = this.tyIDClass[6].tyID;
            await sendAjaxUrl1(that.obj).then(res => {
                this.goodsXinxi7 = res.res;
                //console.log(res)
            })
            that.obj.tyID = this.tyIDClass[7].tyID;
            await sendAjaxUrl1(that.obj).then(res => {
                this.goodsXinxi8 = res.res;
               // console.log(res)
            })
            that.obj.tyID = this.tyIDClass[8].tyID;
            await sendAjaxUrl1(that.obj).then(res => {
                this.goodsXinxi9 = res.res;
                //console.log(res)
            })
            that.obj.tyID = this.tyIDClass[9].tyID;
            await sendAjaxUrl1(that.obj).then(res => {
                this.goodsXinxi10 = res.res;
                //console.log(res)
            })

        }
    })
</script>
